<template>
  <view class="normal-login-container">
    <!-- Logo 和标题 -->
    <view class="logo-content align-center justify-center flex">
      <image style="width: 100rpx; height: 100rpx;" src="../static/1.jpg" mode="widthFix"></image>
      <text class="title">欢迎来到毛孩乐园</text>
    </view>

    <!-- 登录表单 -->
     <!-- 登录表单 -->
        <view class="login-form-content">
          <!-- 用户名输入框 -->
          <view class="input-item flex align-center">
            <uni-icons type="contact" size="30"></uni-icons>
            <input v-model="loginForm.username" class="input" type="text" placeholder="请输入账号" maxlength="30" />
          </view>
    
          <!-- 密码输入框 -->
          <view class="input-item flex align-center">
            <uni-icons type="locked" size="30"></uni-icons>
            <input v-model="loginForm.password" type="password" class="input" placeholder="请输入密码" maxlength="20" />
          </view>
    
          <!-- 验证码输入框 -->
          <view class="input-item flex align-center">
            <uni-icons type="paperclip" size="30"></uni-icons>
            <input v-model="loginForm.code" class="input" type="text" placeholder="请输入验证码" maxlength="4" />
            <image :src="codeUrl" @click="getCode" class="login-code-img"></image>
          </view>
    
          <!-- 登录按钮 -->
          <view class="action-btn">
            <button @click="handleLogin" class="login-btn cu-btn block bg-blue lg round">登录</button>
          </view>
    
          <!-- 注册链接（如果需要显示） -->
          <view class="reg text-center" v-if="register">
            <text class="text-grey1">没有账号？</text>
            <text @click="handleUserRegister" class="text-blue">立即注册</text>
          </view>
    
          <!-- 用户协议和隐私协议链接 -->
          <view class="xieyi text-center">
            <text class="text-grey1">登录即代表同意</text>
            <text @click="handleUserAgreement" class="text-blue">《用户协议》</text>
            <text @click="handlePrivacy" class="text-blue">《隐私协议》</text>
          </view>
        </view>
      </view>
    </template>
<script>
import config from '../config';  // 引入 config 来设置全局的东西
export default {
  data() {
    return {
      loginForm: {
        username: '',
        password: '',
        code: '' // 验证码字段
      },
      captchaEnabled: true, // 是否启用验证码
      register: true, // 是否显示注册链接
      codeUrl: '', // 验证码图片地址，初始化为空
    };
  },
  methods: {
    async handleLogin() {
      if (!this.loginForm.username || !this.loginForm.password || !this.loginForm.code) {
        uni.showToast({
          title: '用户名、密码或验证码不能为空',
          icon: 'none'
        });
        return;
      }

      try {
        const {data, statusCode} = await new Promise((resolve, reject) => {
          uni.request({
            url: config.apiUrl + '/user/login',
            method: 'POST',
            data: {
              username: this.loginForm.username,
              password: this.loginForm.password,
              code: this.loginForm.code // 包括验证码
            },
            success: (res) => resolve(res),
            fail: (err) => reject(err)
          });
        });

        // 检查请求是否成功
        if (statusCode === 200 && data) {
          console.log('登录成功:', data);
          // 登录成功，跳转到首页
          uni.reLaunch({
            url: '/pages/index/index'
          });
        } else {
          // 登录失败，显示错误信息
          uni.showToast({
            title: data.message || '用户名或密码错误',
            icon: 'none'
          });
        }
      } catch (error) {
        console.error('登录错误:', error);
        // 其他错误，可以显示更通用的错误消息
        uni.showToast({
          title: '登录失败，请重试',
          icon: 'none'
        });
      }
    },

    handleUserRegister() {
      console.log('注册链接被点击');
      uni.reLaunch({
        url: '/pages/register'
      });
    },
    handleUserAgreement() {
      console.log('用户协议链接被点击');
      // 如果需要，实现用户协议逻辑
    },
    handlePrivacy() {
      console.log('隐私协议链接被点击');
      // 如果需要，实现隐私协议逻辑
    },
    async getCode() {
      console.log('获取验证码');
      try {
        const { data, statusCode } = await new Promise((resolve, reject) => {
          uni.request({
            url: config.apiUrl + "/user/captcha",
            success: (res) => resolve(res),
            fail: (err) => reject(err)
          });
        });

        if (statusCode === 200 && data) {
          this.codeUrl = data;
        } else {
          console.error("获取验证码失败", statusCode, data);
        }
      } catch (error) {
        console.error("获取验证码错误", error);
      }
    }
  },
  mounted() {
    this.getCode();
  }
};
</script>

<style scoped>
/* 样式根据实际需求自行调整 */
.normal-login-container {
  width: 100%;
  height: 130vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-top: -20vh;
  background-color: #FFEFBA;
}

.logo-content {
  margin-top: 100rpx;
}

.title {
  font-size: 32rpx;
  margin-left: 20rpx;
}

.login-form-content {
  width: 80%;
  margin-top: 50rpx;
}

.input-item {
  margin-bottom: 20rpx;
  display: flex;
  align-items: center;
}

.input {
  flex: 1;
  height: 80rpx;
  border: 1rpx solid #ccc;
  font-size: 28rpx;
  padding-left: 20rpx;
  border-radius: 30rpx;
}

.login-code {
  margin-left: 20rpx;
}

.login-code-img {
  width: 180rpx;
  height: 80rpx;
}

.action-btn {
  margin-top: 40rpx;
  text-align: center;
}

.reg {
  margin-top: 20rpx;
}

.text-grey1 {
  font-size: 28rpx;
  color: #666;
}

.text-blue {
  font-size: 28rpx;
  color: #1E90FF;
}

.xieyi {
  margin-top: 20rpx;
}
</style>